<template>
  <div style="font-size: 14px; width: 50%;margin: 0 auto;">
    <el-select
      class="pop_select"
      size="mini"
      v-model="provinceType"
      multiple
      placeholder="请输入/选择省市名称"
      filterable
      popper-class="pop_select_down"
      @change="selectCheck"
    >
      <el-option v-for="(item) in provinceData" :label="item.data" :value="item.data" :key="item.id">
        <span class="check" />
        <span>{{item.data}}</span>
      </el-option>
      <el-checkbox 
      
      v-model="isSelectAll" style="padding-left:18px" @change="selectAll">全选</el-checkbox>
    </el-select>
    <div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      provinceType: [],
      isSelectAll: false,
      provinceData: [
        {data:"北京市",id:'10'},
        {data:"广东省",id:'02'},
        {data:"山东省",id:'301'},
      ],
      // testData:["123", "456"]
    };
  },
  methods: {
    selectAll(val) {
      this.provinceType = val? this.provinceData.map(item => item.data) : [];
    
    },
    selectCheck(val) {
      if (val.length === this.provinceData.length) {
        this.provinceType = val;
        this.isSelectAll = true;
      } else {
        this.isSelectAll = false;
      }
    }
  }
};
</script>


<style>
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
      top: 3px;
    left: 20px;
  z-index: 1;
  color: #000 
}
.el-select-dropdown.is-multiple .el-select-dropdown__item .check {
  display: inline-block;
  position: relative;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 2px;
  box-sizing: border-box;
  width:14px;
  height: 14px;
  vertical-align: middle;
  margin-right: 10px;
  background-color: rgb(192, 255, 242);
}
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected,
.el-checkbox__input.is-checked+.el-checkbox__label {

    color: #0c0c0d;
    /* background-color: #FFF; */
}
.el-checkbox__input.is-checked .el-checkbox__inner {
    background-color: #ffffff;
    border-color: #000000;
    color:#000;
}
.el-checkbox__inner::after {
    box-sizing: content-box;
    content: "";
    border: 1px solid rgb(0, 0, 0);
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
}

</style>